<template>
  <div  style="height: 700px" >
    <div style="width: 100%; height: 80px;" class="show-time" >
      <span style="font-family: 'Britannic Bold', serif;font-size: 18px; " > 梅花易数推演测算 </span>
    </div>


    <div class="">
       <el-input size="medium" type="text"  style="width: 100px;margin: 5px;" placeholder="年"  v-model="yearV" ></el-input>
       <el-input  size="medium" type="text"  style="width: 100px;margin: 5px;" placeholder="月"  v-model="monthV"></el-input>
       <el-input size="medium" type="text"  style="width: 100px;margin: 5px;" placeholder="日" v-model="dayV"></el-input>
       <el-input size="medium" type="text"  style="width: 100px;margin: 5px;" placeholder="时"  v-model="hourV"></el-input>
       <el-button type="primary" size="mini"  style="height: 40px;" @click="getReq" >确定 </el-button>
    </div>

    <el-popover
        placement="bottom"
        :title="indexList[currentGua]"
        width="180"
        trigger="hover"
        :content="guaExplain[currentGua]"
        v-model="visible">

    </el-popover>
    <div class="ans_gua " >

      <el-card class="box-card" >
        <div slot="header" class="clearfix">
          <span>测算结果</span>
        </div>

        <div style="height: 300px;font-size: 12px; " >
          <el-row :gutter="1" >

            <el-col :span="6" v-for="i in 3" style="margin: 10px;cursor: pointer"  >
              <el-card  >
                <div class="cloumFlex" @mouseover="getTip(i-1)"   >
                  {{ansList[i-1]['divinatoryName']}}
                  <div class="cloumFlex" >
                    <yao v-for="(e,index) in ansList[i-1]['id']" :key="index"  :type="e" ></yao>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row>

            <el-card>
              <div  v-for="i in 3" class="showTime" style="font-family: 'Britannic Bold', serif"   >
                <span> {{indexList[i-1]}}:  {{ansList[i-1]['divinatoryExplain'] }} </span>
                <el-divider></el-divider>
              </div>
            </el-card>
          </el-row>

        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import Yao from "@/components/yao.vue";

import {get, post} from "@/utils/http";
import index from "vuex";

export default {
  name: "plumBlossom",
  computed: {
    index() {
      return index
    }
  },
  components: {Yao},
  data(){
    return{
      visible:false,
      sign: false,
       guaExplain:['本卦是起卦时最初得到的卦象，' +
       '它反映了事物的初始状态、当前情况或是求测问题的本质。' +
       '在占卜中，本卦是分析的基础，代表了问题的出发点或现状。',
       '互卦是从本卦的内部结构衍生出来的卦象，通过本卦的二、三、四爻组成上卦，' +
       '三、四、五爻组成下卦来获得。互卦揭示了问题发展过程中的中间环节、' +
       '隐藏的因素或是事件发展的内在动力。','变卦是在本卦的基础上，根据动爻（即在起卦过程中指定为变化的爻）' +
         '的变化而形成的新的卦象。如果本卦中有某个爻被确定为动爻，则该爻阴阳性质改变，由此生成的新卦便是变卦。'],
      currentGua:'',
      yearV: '',
      monthV: '',
      dayV: '',
      hourV: '',
      baseName:['坤','艮','坎','巽','震','离','兑','乾'],
      base8: ['000','001','010','110','100','101','011','111'],
      ans: '',
      guaName: '',
      explain:"",
      ansList:[{
        divinatoryExplain:''
      },{
        divinatoryExplain:''
      },{
        divinatoryExplain:''
      }],
      indexList:['本卦','变卦','互卦']
    }
  },
  methods:{
    /**
     *  获取结果
     */
    getTip(e){
      console.log(e)
      if(this.ansList[0]['divinatoryExplain']===''){
        return
      }
      this.visible = !this.visible
      this.currentGua = e
      console.log('visible')
    },
    getReq(){
      if (this.sign !== false) {
        this.$message({
          type: 'success',
          message: '该操作必须等待1小时，才能再次操作'
        })
        setTimeout(() => {
          this.sign = false
        }, 60000)
      } else {
        this.sign = true
        this.toGetRes()
      }
    },

    toGetRes(){
      post('/plumBlossom',{
        year:this.yearV,
        month:this.monthV,
        day: this.dayV,
        hour:this.hourV
      }).then(e=>{
        console.log("ans:")
        console.log(e)
        let data  = e.data
        if(data ==null){
          this.$message({
            type: "error",
            message: "抱歉，由于后端算法的局限性 该日期无法得出结果"
          })
          return
        }
        data.forEach(ee => {
          // 将字符串转换为数组
          let arr = ee['id'].split("");
          // 反转数组
          arr.reverse();
          ee['id'] = arr.join("");
          // 将数组转换回字符串
          // 返回反转后的字符串
        })
        this.ansList = e.data

      })
    }
  }
}
</script>

<style >
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  font-family: "Britannic Bold", serif;
  width: 480px;
  height: 580px;
}
.show-time{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.ans_gua{
  width: 35%;
  margin:0 45px ;
  height: 300px;
}

.img_gua{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width: 80px;
  height: 100px;
  margin: 10px;
}
.clearfix{

}
.showTime{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 90px;
}
.cloumFlex{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 90px;

}
</style>